<template>
  <div class="item">
    <div class="label">{{ props.label }}</div>
    <div class="value">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

const props = defineProps({
  width: { type: Number, default: 320 },
  height: { type: Number, default: 40 },
  label: { type: String, default: '标签' },
  labelWidth: { type: Number, default: 120 },
  labelColor: { type: String, default: '#333333' },
  labelBgColor: { type: String, default: '#C8E0E4' },
})

const width = ref<string>(props.width + 'px')
const height = ref<string>(props.height + 'px')
const labelWidth = ref<string>(props.labelWidth + 'px')
const labelColor = ref<string>(props.labelColor)
const labelBgColor = ref<string>(props.labelBgColor)

watch(
  () => props.width,
  () => (width.value = props.width + 'px')
)
watch(
  () => props.height,
  () => (height.value = props.height + 'px')
)
watch(
  () => props.labelWidth,
  () => (labelWidth.value = props.labelWidth + 'px')
)
watch(
  () => props.labelColor,
  () => (labelColor.value = props.labelColor)
)
watch(
  () => props.labelBgColor,
  () => (labelBgColor.value = props.labelBgColor)
)
</script>

<style lang="less" scoped>
.item {
  display: flex;
  align-items: center;
  height: v-bind(height);
  width: v-bind(width);
  background-color: #e2e2e250;
  margin-bottom: 6px;
  margin-right: 10px;

  > .label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: v-bind(labelWidth);
    color: v-bind(labelColor);
    background-color: v-bind(labelBgColor);
  }

  > .value {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: 0 4px 4px 0;
    background-color: white;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
  }
}
</style>
